<template>
  <div>
     <h1>分配角色页面</h1>
     <h1>基本信息</h1>
     <el-form inline>
      <el-form-item label="用户昵称">
        <el-input disabled v-model="$route.query.nickName"></el-input>
      </el-form-item>
       <el-form-item label="登录账号">
        <el-input disabled v-model="$route.query.userName"></el-input>
      </el-form-item>
     </el-form>
    <el-table border :data="roleList"
    @selection-change="handleSelectionChange">
       <el-table-column type="index" label="序号" width="55"></el-table-column>
       <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column prop="roleKey" label="角色编号"></el-table-column>
               <el-table-column prop="roleName" label="角色名称"></el-table-column>
          <el-table-column prop="permissions" label="权限字符"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
    </el-table>
    <div style="text-align: center;">
      <el-button type="primary" @click="toSendRole">提交</el-button>
      <el-button type="primary" @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>
<script setup>
  import {ref} from 'vue'
  // 获取角色列表
  import {listRole} from '@/api/system/role'
  // 导入分配角色接口
  

  import {updateAuthRole} from '@/api/system/user'
  import {useRoute,useRouter} from 'vue-router'
  let route=useRoute()
  let router=useRouter()
let roleList = ref([]) //角色列表
listRole().then(res=>{
  console.log(res,"角色列表")
  roleList.value=res.rows;
})
// 复选框 选中角色 触发的selection-change
let roleIds=ref([])//选中的角色ids
let handleSelectionChange=(val)=>{
  console.log(val,"选中角色的")
  roleIds.value=val.map(item=>item.roleId).join(",") //map方法 只要选中的id
  console.log(roleIds.value,"整理的角色id数组")
}
// 调用分配角色接口
let toSendRole=async ()=>{
   let res=await updateAuthRole({
     userId:route.params.userId, //用户id
     roleIds:roleIds.value //选中的角色ids   2,3
   })
   console.log("分配角色",res)
   router.push({ //跳回列表页
     path:'/system/user'
   })

}
</script>